<template>
    <div>
        <el-card class="box-card">
          <!-- 列表区域  -->
          <div style="padding-bottom: 15px;">
              <el-link type="primary" :underline="false" @click="$router.go(-1)">
                <i class="el-icon-s-fold">返回上一级</i>
              </el-link>
              <i class="el-icon-s-fold"> | </i>
              <el-link type="primary" @click="handetail(data.name)">
                <i class="el-icon-s-fold" >编辑</i>
              </el-link>
          </div>
          <div>
            <p>标题：{{data.name}}</p>
          <v-md-preview :text="Content"></v-md-preview>
          </div>
          <div class="explain">
              温馨提示：本博客所有内容仅供学习，不允许商用，如有侵权，请联系博主删除，谢谢。
          </div>
          <el-divider><el-icon><star-filled/></el-icon></el-divider>
        </el-card>
    </div>
</template>

<script>
import axios from "axios";
import {Base64} from 'js-base64'



export default {
    data() {
        return {
            // 内容
            data: [],
            Content: '',
        }
    },
    created() {
        this.getUserList()
    },
    methods: {
        async getUserList() {
            // const { config: res } = await this.$http.get('users', {
            //     params: this.queryInfo
            // })
            // if (res.meta.status !== 200) return this.$message.error('获取用户列表失败')
            // this.userlist = res.config.users
            // this.total = res.config.total
            let path = this.$route.params.path
            if (path) {
                axios.get(
                  // 'https://gitee.com/api/v5/repos/gitlyl/family_blog/contents/blog/' + path + '?ref=gh-pages&access_token=b03f89ca80a684fb34dde249e8f5eebd',
                    gitee_config.url + path + '?ref=' + gitee_config.ref + '&access_token=' + gitee_config.access_token,
                ).then((res) => {
                    this.data = res.data
                    // console.log(this.config)
                    // this.encodePwd=Base64.encode(password);//加密
                    // this.Content = Base64.decode(res.config.content) //解密
                    // this.Content = JSON.parse(Base64.decode(res.config.content)) //解密并转成json
                    this.Content = Base64.decode(res.data.content) //解密
                    console.log(this.data);
                    // console.log(typeof this.config.encoding);
                })
            }
        },
        handetail (path) {
            // location.href = '#/detail'
            // 通过路劲跳转
            // this.$router.push(`/detail/${id}`)
            // 通过命名路由跳转
            this.$router.push({
                name: 'Edit',
                params: {
                    path: path
                }
            })
        },
    },

    watch: {
        '$route'(to, from) {
            this.getUserList()
            //你在create里的方法
            //你在mounted里的方法
        }
    },
}
</script>

<style lang="less" scoped>
/* 全局样式表 */
html, body, #app {
  /* 高度占100% */
  height: 100%;
  /* margin重置为0 */
  margin: 0;
  /* padding重置为0 */
  padding: 0;
}

.page-container {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 20px 0 20px;
    min-height: 800px;
    opacity: 0.9;
}
.detail {
    font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif;
    line-height: 1.75;
    max-width: 980px;
    position: relative;
    margin: 0px auto;
    h1.detail-title {
        color: #918f90;
        font-size: 25px;
        font-weight: 700;
        margin-bottom: 25px;
        text-transform: uppercase
    }
    .detail-info {
        text-align: right;
        i {
            margin: 0 5px;
        }
        span {
            margin-right: 20px;
        }
    }
    .detail-body {
        min-height: 500px;
        font-size: 18px;
        line-height: 1.75;
        margin-bottom: 40px;
        & > :last-child {
            margin-bottom: 0;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        p {
            margin: 1em 0;
        }
        h1 {
            font-size: 20px;
            line-height: 40px;
        }
        h2 {
            font-size: 18px;
            line-height: 37px;
        }
        h3 {
            font-size: 16px;
            line-height: 34px;
            display: table;
        }
        h4 {
            font-size: 14px;
            line-height: 28px;
        }
        ul {
            li {
                &:before {
                    color: #efefef;
                    font-size: 11px;
                    font-size: 0.6875rem;
                    content: "\e60d";
                    font-family: iconfont;
                }
            }
        }
        ol {
            counter-reset: ol-counter;
            li {
                &:before {
                    content: counter(ol-counter) ".";
                    counter-increment: ol-counter;
                }
            }
        }
        blockquote {
            font-size: 25px;
            line-height: 36px;
            color: #888;
            clear: both;
            position: relative;
            padding: 1em 0;
            margin: 1.62em 0;
            text-align: center;
            &:after {
                width: 2%;
                left: 49%;
                border-top: .2em solid #efefef;
                border-bottom: .2em solid #efefef;
            }
            p {
                margin: 1em 0 0;
                &:first-child {
                    margin: 0;
                }
            }
        }
        input[type='password'] {
            background: #fafafa;
            height: 50px;
            margin: 20px 0 0;
            border-radius: 3px;
        }
        input[type='submit'] {
            background: #918f90;
            height: 50px;
            width: 150px;
            margin: 20px 0;
            border-radius: 30px;
            cursor: pointer;
        }
        table {
            line-height:25px;
            th {
                text-align:center;
                border:1px solid #aaa;
            }
            tr:hover {
                background-color:#87CEFF
            }
        }
    }
    .detail-body p+h1,
    .detail-body p+h2,
    .detail-body p+h3,
    .detail-body p+h4,
    .detail-body p+h5,
    .detail-body p+h6 {
        margin-top: 40px;
        margin-bottom: 30px;
    }
    .detail-body h5,
    .detail-body h6 {
        text-transform: uppercase;
    }
    .detail-body ul,
    .detail-body ol {
        font-size: 15px;
        border: 1px solid #efefef;
        padding: 5px 20px;
        margin: 0 0 30px 0;
        border-radius: 3px;
    }
    .detail-body ul li,
    .detail-body ol li {
        font-size: 15px;
        line-height: 1.75;
        padding: 10px 0 10px 25px;
    }
    .detail-body ul li:before,
    .detail-body ol li:before {
        float: left;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: -25px;
        color: #ddd;
    }
    .detail-body ul li~li,
    .detail-body ol li~li {
        border-top: 1px solid #efefef;
    }
    .detail-body blockquote:after,
    .detail-body blockquote:before {
        content: '';
        display: block;
        position: absolute;
        width: 38%;
        height: 100%;
        left: 31%;
        top: 0;
        pointer-events: none;
        border-top: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
    }
    .share {
        margin: 30px 0 0 0;
        text-align: center;
        font-size: 30px;
        ul {
            overflow: hidden;
            margin: 0 auto;
            display: table;
            li {
                float: left;
                width: 50px;
                height: 50px;
                box-sizing: border-box;
                border: 2px solid #e8e9e7;
                border-radius: 50%;
                margin: 0 10px;
                opacity: .75;
                transition: opacity .36s linear;
                cursor: pointer;
                position: relative;
                text-rendering: auto;
                list-style: none;
                span {
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: relative;
                }
                a {
                    position: absolute;
                    //background: url(../../assets/img/share/shareicon.png) no-repeat;
                    background-size: 32px 160px;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
                    margin: 0;
                    float: left;
                    width: 32px;
                    line-height: 32px;
                    height: 32px;
                    cursor: pointer;
                    text-indent: -100em;
                    overflow: hidden;
                    color: #3a8ceb;
                    &:hover {
                        color: #333;
                        opacity: .8;
                        filter: alpha(opacity=80);
                        text-decoration: underline;
                    }
                }
                .s-praise {
                    background-position: 0 -128px;
                }
                .s-weinxi {
                    background-position: 0 0;
                }
                .s-sina {
                    background-position: 0 -64px;
                }
                .s-qzone {
                    background-position: 0 -32px;
                }
            }
            .f-qq i {
                margin: 0;
                width: 32px;
                line-height: 32px;
                height: 32px;
                cursor: pointer;
                overflow: hidden;
                color: #14afff;
                display: inline-block;
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                &:hover {
                    opacity: .8;
                    filter: alpha(opacity=80);
                    text-decoration: underline;
                }
            }
            li.f-praise {
                border-color: #f46753;
            }
            li.f-weinxi {
                border-color: #5ac64f;
            }
            li.f-sina {
                border-color: #ff7171;
            }
            li.f-qq {
                border-color: #14afff;
            }
            li.f-qzone {
                border-color: #fbb611;
            }
        }
    }
}
.explain {
    margin: 20px 0;
    border-left: 3px solid #6bc30d;
    min-height: 26px;
    line-height: 26px;
    padding: 5px 20px;
    background-color: #f8f9f7;
    font-size: 16px;
    font-weight: 400;
    color: #585957;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    clear: both;
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px){
}
@media screen and (min-width: 992px){
}
@media screen and (min-width: 1200px){
}
@media screen and (max-width:760px) {
    .detail-title {
        font-size: 25px;
        text-align: center
    }
    .detail-body {
        font-size: 16px;
    }
}

</style>
